<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        margin: 0 auto;
        height: 500px;
        text-align: center;
    }
    p{
        margin: 0 auto;
        width: 300px;
        height: 300px;
        background-color: #f00;
        color: #fff;
        font-size: 12px;
    }
</style>
<body>
    <div>
        属性名：<input type="text" class="ming" value="background"><br>
        属性值：<input type="text" class="zhi" value="red"><br>
        <button class="btn">确认</button>
        <button class="btn1">重置</button>
        <p>在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</p>
    </div>
</body>
</html>
<script>
    var ming=document.querySelector('.ming')
    var zhi=document.querySelector('.zhi')
    var btn=document.querySelector('.btn')
    var btn1=document.querySelector('.btn1')
    var p=document.querySelector('p')
  btn.onclick=function(){
      p.style[ming.value]=zhi.value
  }
  btn1.onclick=function(){
      p.removeAttribute('style')
  }
</script>